<template>
  <div>
    <div class="header">
    </div>
    <div class="menu">
      <div class="menu-container">
        <admin-menu menuName="/admin/project"></admin-menu>
      </div>
      <div class="content">
        <a href="javascript:void(0)" @click="addProject">新增</a>
          <el-table
            :data="projectList"
            style="width: 100%">
            <el-table-column
              prop="name"
              label="专题名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="introduction"
              label="专题介绍">
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="100">
              <template slot-scope="scope">
                <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
                <el-button type="text" size="small" @click="editProject(scope.row)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
      </div>
    </div>
    <el-dialog title="添加专题" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="专题名称" label-width="120px">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="专题简介" label-width="120px">
          <el-input v-model="form.introduction" ></el-input>
        </el-form-item>
        <el-upload
          class="upload-demo"
          ref="upload"
          action="/api/updateproject"
          :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          <img style="width:20%" :src="'https://api.yeshaojun.com'+ form.img" alt="">
        </el-upload>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitProject">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import adminMenu from '../../components/admin/menu'
import myArticle from '../../components/admin/article'
import mixinsList from '../../mixins/index.js'
import axios from 'axios'
export default {
  mixins: [mixinsList],
  data () {
    return {
      tableData: [],
      form: {},
      dialogFormVisible: false
    }
  },
  methods: {
    handleDelete (obj) {
      this.$store.dispatch('deleteProject', {
        data: {
          id: obj._id
        },
        cb: (res) => {
          if (res.data.stateCode === '200') {
            this.$message.success('删除成功')
            this.getProject()
          }
        }
      })
    },
    addProject () {
      this.dialogFormVisible = true
    },
    submitProject (param) {
      // this.$refs.upload.submit();
      this.form = {}
      var obj = this.$refs.upload.uploadFiles[0] ? this.$refs.upload.uploadFiles[0].raw : ''
      var image = new FormData()
      image.append('file', obj)
      image.append('data', JSON.stringify(this.form))
      axios.post('/api/updateproject', image, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then((res) => {
        if (res.data.stateCode === '200') {
          this.dialogFormVisible = false
          this.getProject()
        }
      })
    },
    editProject (obj) {
      this.dialogFormVisible = true
      this.form = obj
    }
  },
  components: {
    adminMenu,
    myArticle
  },
  mounted () {
    this.getProject()
  }
}
</script>
<style lang="stylus" scoped>
  .header
    background-color #4d535b
    height 40px
    width 100%
  .menu
    display flex
    .menu-container
      flex-basis 200px
    .content
      flex-grow 2
      background-color #fff
      padding 40px
</style>
<style>
  .upload-demo {
    margin-left: 48px;
  }
</style>
